<template>
	<div style="height: 100%;">
		<el-container>
			<el-main>
				<!--标签页-->
				<el-tabs type="border-card">
					<!--科目列表页-->
					<el-tab-pane label="科目列表">
						<el-card shadow="never" class="card-container" style="margin-bottom:15px;">
							<el-form :model="searchForm">
								<el-form-item label="科目名称" class="inline">
									<el-input v-model="searchForm.subjectName" placeholder="请输入科目名称"></el-input>
								</el-form-item>
								<el-form-item label="科目状态" class="inline">
									<el-select v-model="searchForm.enabled" placeholder="请选择科目状态" class="full">
										<el-option v-for="item in dicts.system_global_status" :key="item.k"
											:label="item.k" :value="item.v">{{ item.k }}</el-option>
									</el-select>
								</el-form-item>
								<el-form-item class="inline">
									<el-button type="primary" @click="getSubjectPageData">搜索</el-button>
									<el-button @click="resetSearchForm">重置</el-button>
								</el-form-item>
							</el-form>
						</el-card>
						<el-card shadow="never">
							<div class="toolbar" style="margin-bottom:15px;">
								<el-button type="primary" icon="Plus" @click="AOUSubject('')">添加科目</el-button>
								<el-button type="default" icon="Printer" @click="exportSubject">导出</el-button>
							</div>
							<el-table row-key="id" :data="tableData" width="100%" border stripe
								:header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }"
								@expand-change="expandChange">
								<el-table-column label="等级管理" type="expand" width="100" align="center">
									<el-card style="margin: 15px;" shadow="never">
										<el-button type="primary" icon="Plus" style="margin-bottom: 10px"
											@click="AOUGrade('')">新建等级</el-button>
										<el-table :data="gradeList" width="100%" border stripe>
											<el-table-column type="index" label="排序" width="60" align="center" />
											<el-table-column label="等级名称" prop="gradeName" align="center" width="200" />
											<el-table-column label="价格" prop="amount" align="center" />
											<el-table-column label="协议" align="center">
												<template #="{ row }">
													<el-link type="primary" :underline="false"
														@click="viewAgreement(row)">查看协议</el-link>
												</template>
											</el-table-column>
											<el-table-column label="启用状态" prop="enabled" align="center">
												<template #="{ row }">
													<template v-for="item in dicts.system_global_status">
														<el-tag :type="Number(item.v) ? '' : 'danger'"
															v-if="row.enabled == item.v">{{ item.k }}</el-tag>
													</template>
												</template>
											</el-table-column>
											<el-table-column label="操作" width="200" align="center">
												<template #="{ row }">
													<el-link icon="Edit" type="primary" style="margin-left: 10px"
														:underline="false" @click="AOUGrade(row.id)">修改</el-link>
													<el-popconfirm :title="`确认删除-${row.gradeName}-吗？`"
														@confirm="rmGrade(row.id)">
														<template #reference>
															<el-link icon="Delete" style="margin-left: 10px"
																type="danger" :underline="false">删除</el-link>
														</template>
													</el-popconfirm>
												</template>
											</el-table-column>
										</el-table>
									</el-card>
								</el-table-column>
								<el-table-column label="科目名称" prop="subjectName"></el-table-column>
								<el-table-column label="科目状态" prop="enabled">
									<template #="{ row }">
										<template v-for="item in dicts.system_global_status">
											<el-tag :type="Number(item.v) ? '' : 'danger'"
												v-if="row.enabled == item.v">{{
								item.k }}</el-tag>
										</template>
									</template>
								</el-table-column>
								<el-table-column label="操作" width="150" fixed="right">
									<template #="{ row }">
										<el-link :underline="false" type="primary" style="margin-right: 10px;"
											icon="Edit" @click="AOUSubject(row.id)">编辑</el-link>
										<el-popconfirm :title="`确认删除-${row.subjectName}-吗？`"
											@confirm="rmSubject(row.id)">
											<template #reference>
												<el-link :underline="false" type="danger" icon="Delete">删除</el-link>
											</template>
										</el-popconfirm>
									</template>
								</el-table-column>
							</el-table>
							<XlxPagination v-model:currentPage="searchForm.current" v-model:pageSize="searchForm.size"
								:total="totals" @update:currentPage="getSubjectPageData" @update:pageSize="updateSize">
							</XlxPagination>
						</el-card>
					</el-tab-pane>
					<!--回收站列表页-->
					<el-tab-pane label="回收站">
						<el-card>
							回收站
						</el-card>
					</el-tab-pane>
				</el-tabs>
			</el-main>
			<subjectDialog v-model="dialogVisible" :id="subjectId" @addSuccess="getSubjectPageData">
			</subjectDialog>
			<gradeDialog v-model="gradeDialogVisible" :id="gradeId" :current-subject="currentSubject"
				@addSuccess="expandChange(currentSubject)">
			</gradeDialog>
			<contractDialog v-model="agreementDialogVisible" :id="agreementId"></contractDialog>
		</el-container>
	</div>
</template>

<script setup lang="ts">
import { getGradeListApi, getSubjectDelApi, getSubjectExportApi, getSubjectPageApi } from '@renderer/api/subject';
import { useDicts } from '@renderer/composables/dicts';
import { SearchSubject, SubjectItem, SubjectItemLevel } from '@renderer/interface/subject';
import { onBeforeMount, ref } from 'vue';
import { reactive } from 'vue'
import subjectDialog from './subjectDialog.vue'
import gradeDialog from './gradeDialog.vue'
import contractDialog from './contractDialog.vue'
import { getGradeDelApi } from '@renderer/api/grade';
import { GradeForm } from '@renderer/interface/grade';

/* 初始化表单 */
// 搜索表单
const searchFormValue = () => ({
	current: 1,
	size: 5,
	subjectName: '',
	enabled: ''
})
const searchForm = reactive<SearchSubject>(searchFormValue())
// 重置按钮
const resetSearchForm = () => {
	Object.assign(searchForm, searchFormValue())
	getSubjectPageData()
}
// 总数
const totals = ref(0)
// 表单数据
const tableData = ref<SubjectItem[]>([])
// 获取科目列表
const getSubjectPageData = async () => {
	const { code, data: { records, total } } = await getSubjectPageApi(searchForm)
	if (code !== '200') return

	tableData.value = records
	totals.value = total
}
// 字典
const { dicts } = useDicts(['system_global_status'])
// 导出科目
const exportSubject = async () => {
	const { code } = await getSubjectExportApi({
		subjectName: searchForm.subjectName,
		enabled: searchForm.enabled
	})
	if (code !== '200') return

	ElMessage({
		type: 'success',
		message: '导出成功~'
	})
}

/* 科目相关 */
// 科目等级
const gradeList = ref<SubjectItemLevel[]>()
// 当前展开行
const currentSubject = ref<SubjectItem>({
	id: '',
	subjectName: '',
	enabled: '',
	createBy: '',
	createTime: 0,
	updateBy: null,
	updateTime: null
})
// 展开行时
const expandChange = async (row: SubjectItem) => {
	currentSubject.value = row
	const { code, data } = await getGradeListApi({ subjectId: row.id })
	if (code !== '200') return

	gradeList.value = data
}
// 是否显示对话框
const dialogVisible = ref(false)
// 科目id
const subjectId = ref('')
// 添加/修改科目按钮
const AOUSubject = (id: string) => {
	subjectId.value = id
	dialogVisible.value = true
}
// 删除科目按钮
const rmSubject = async (id: string) => {
	const { code } = await getSubjectDelApi(id)
	if (code !== '200') return

	getSubjectPageData()
	ElMessage({
		type: 'success',
		message: '删除成功~'
	})
}

/* 等级相关 */
// 是否显示等级对话框
const gradeDialogVisible = ref(false)
// 等级id
const gradeId = ref('')
// 添加/修改等级按钮
const AOUGrade = (id: string) => {
	gradeId.value = id
	gradeDialogVisible.value = true
}
// 删除等级按钮
const rmGrade = async (id: string) => {
	const { code } = await getGradeDelApi(id)
	if (code !== '200') return

	expandChange(currentSubject.value)
	ElMessage({
		type: 'success',
		message: '删除成功~'
	})
}

/* 协议相关 */
const agreementDialogVisible = ref(false)
const agreementId = ref('')
// 查看协议
const viewAgreement = (row: GradeForm) => {
	agreementId.value = row.id!
	agreementDialogVisible.value = true
}

/* 分页组件回调 */
// 分页组件页面大小更新时
const updateSize = () => {
	searchForm.current = 1
	getSubjectPageData()
}

onBeforeMount(() => {
	getSubjectPageData()
})
</script>

<style scoped lang="less">
.inline {
	margin-right: 20px;
	display: inline-flex;
	vertical-align: middle;
	width: 30%;
}

.tableNav {
	width: 100%;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: space-between;

	.info {
		margin-right: 40px;
	}
}
</style>